<template>
  <el-main style="height: 100%;">
    <!--显示数据 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style="width: 100%;display: flex;justify-content: space-between">
          <el-statistic
              :value="3300"
              title="预计报道人数"
          ></el-statistic>
          <el-statistic
              :value="1300"
              title="全校已报到人数"
          ></el-statistic>
          <el-statistic
              :value="20"
              title="今日已报道人数"
          ></el-statistic>
          <el-statistic
              :value="2000"
              title="未报道人数"
          ></el-statistic>
        </div>
        <div style="width: 100%;margin-top: 20px">
          <span>全校报道进度:</span><el-progress :percentage="50" :fomart="50+'%'"></el-progress>
        </div>
<!--        详细数据筛选筛选卡片-->
        <el-card class="box-card" style="margin-top: 15px">
          <h3>数据筛选</h3>
          <div>
            <span style="margin-right: 10px">数据筛选依据:</span>
            <el-select v-model="needData" placeholder="请选择依据">
              <el-option label="学院" value="xy"></el-option>
              <el-option label="专业" value="zy"></el-option>
              <el-option label="城市" value="cs"></el-option>
              <el-option label="部门" value="bm"></el-option>
            </el-select>
          </div>

          <!--          分割线1-->
          <el-divider>
            <span v-if="needData=='无'">无条件筛选</span>
          </el-divider>

<!--根据needData展示不同的选项-->
          <div v-if="needData =='xy'">
            <span style="margin-right: 10px">筛选学院:</span>
            <el-select v-model="queryData" placeholder="请选择学院">
              <el-option v-for="number in 5" :key="number" :label="'学院'+number" :value="number"></el-option>
            </el-select>
          </div>

          <div v-if="needData =='zy'">
            <span style="margin-right: 10px">筛选专业:</span>
            <el-select v-model="queryData" placeholder="请选择专业">
              <el-option v-for="number in 5" :key="number" :label="'专业'+number" :value="number"></el-option>
            </el-select>
          </div>

          <div v-if="needData =='cs'">
            <span style="margin-right: 10px">筛选城市:</span>
            <el-select v-model="queryData" placeholder="请选择城市">
              <el-option v-for="number in 5" :key="number" :label="'城市'+number" :value="number"></el-option>
            </el-select>
          </div>

          <div v-if="needData =='cs'">
            <span style="margin-right: 10px">筛选部门:</span>
            <el-select v-model="queryData" placeholder="请选择部门">
              <el-option v-for="number in 5" :key="number" :label="'城市'+number" :value="number"></el-option>
            </el-select>
          </div>

        </el-card>
      </el-col>
      <el-col :span="12">
<!--     百度图表   -->
        <div id="eCharts_id_01"  style="width: 100%; height: 45vh;display: flex;justify-content: center"></div>
      </el-col>
<!--      第二行-->
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-empty v-if="queryData=='无'" description="描述文字"></el-empty>
      <div v-else>
        <h2>{{queryData+'数据'}}</h2>
        <el-row>
          <div class="grid-content bg-purple" style="width: 100%;display: flex;justify-content: space-between">
            <el-statistic
                :value="300"
                title="预计报道人数"
            ></el-statistic>
            <el-statistic
                :value="50"
                title="已报到人数"
            ></el-statistic>
            <el-statistic
                :value="250"
                title="未报道人数"
            ></el-statistic>
          </div>
        </el-row>
      </div>
    </el-row>
  </el-main>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Main',
  components: {
      
  },
  data() {
      return {
        //默认无不展示数据筛选内容
        needData:'无',
        queryData:'无'
      }
  },
  methods:{
    getChart(){
        //  百度图表代码
        // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('eCharts_id_01'));
      let option = {
        title: {
          text: '报道人数饼图',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '全校报道人数饼图',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1300, name: '已报到人数'},
              {value: 2000, name: '未报道人数'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.getChart()
  }
}


</script>
<style scoped>

.el-menu-item.is-active {
background-color: #178EFC !important; /* 修改为你想要的颜色 */
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.headshow {
  height: 10vh;
  width: 100%;
  background-color: aquamarine;
  size: 40px;
}
.colse-btn{
  z-index: 100;
  position: absolute;
  width: 20px;
  height: 150px;
  background-color: #C1C9CF;
  right: 0;
  top: 50%;
  border-radius: 30%;
  text-align: right;
  font-size: 20px;
  font-weight: 900;
  color: #173577;
  line-height: 150px;
  transform: translateX(60%);
  opacity: 0.4;
  cursor: pointer;
  clip-path: inset(0 0 0 40%);
  
}
.colse-btn:hover{
  opacity: 1;
}
.pagelist{
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
}
.show-data{
  width: 100%;
  height: 10%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  /* background-color: gray */
}
</style>

